<!DOCTYPE html>
<html>
    <head>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
    <body>
      <style>
        body {
          font-family: Arial, Helvetica, sans-serif;
        }
      </style>
        <div id='canvas'></div>
    </body>
    <script src="./graph_utils.js"></script>
    <script src="./graph_data.js"></script>
    <script src="./line_plotter.js"></script>
    <script src="./box_plotter.js"></script>
    <script src="./dot_plotter.js"></script>
    <script src="./bar_plotter.js"></script>
    <script src="./stacked_bar_plotter.js"></script>
    <script src="./graph_plotter.js"></script>
    <script>
      'use strict';
      /*
       * Example usage of chart plotting.
       */
      const DATA_LOCATION = './example/data/TravelGifPage.csv';
      const METRIC_NAME = 'memory:chrome:all_processes:reported_by_os:' +
        'proportional_resident_size';
      // const without = [];
      // const withs = [];
      const MiB = 1024 * 1024;
      const data = {
        storyOne: {
          'a': [1, 1, 1],
          'b': [2, 2, 2],
          'c': [3, 3, 3],
        },
        storyTwo: {
          'a': [4, 1, 1],
          'b': [2, 2, 2],
          'c': [3, 3, 3],
        },
      };
      const dataTwo = {
        storyOne: {
          'a': [1, 4, 1],
          'b': [2, 2, 5],
          'c': [20, 3, 3],
        },
        storyTwo: {
          'a': [4, 1, 1],
          'b': [2, 5, 2],
          'c': [1, 3, 3],
        },
      };

      const convertBytesToMiB = (value) => +((value / MiB).toFixed(5));

      const loadData = async() => {
        // const data = await d3.csv(DATA_LOCATION);
        // const propResSizeData = data.filter(row => row.name === METRIC_NAME);
        // propResSizeData.forEach((row, index) => {
        //   without.push(convertBytesToMiB(+row.avg_y));
        //   withs.push(convertBytesToMiB(+row.avg_x));
        // });
        const graph = new GraphData();
        graph.xAxis('Stories')
            .yAxis('Memory used (MiB)')
            .title('Average memory used with and without site' +
              'isolation enabled for each story')
            .setData({
              singleStack: data,
              secondStack: dataTwo,
            })
            .plotStackedBar();
      };
      loadData();
    </script>
</html>